<template>
	<view>
		<view class="top-img">
			<image src="../../static/card/top.png"></image>
		</view>
		<!-- 自定义导航栏 -->
		<view class="nabbar" :style="{'height': statusBarHeight + barHeight + 'px'}">
			<!-- //手机状态栏 -->
			<view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
			<!-- //导航栏 -->
			<view class="nabbar-box" :style="{ 'top': statusBarHeight+ 'px', 'heigth': barHeight + 'px' }">
				<view class="nabbar-cont">
					<view style="position: absolute;left: 32rpx;" @click="toBack()">返回</view>
					<view>数据看板</view>
				</view>
			</view>
		</view>
		<view class="top-num">
			<view class="sum">
				<view>{{infos.view_count}}</view>
				<view>播放数</view>
			</view>
			<view class="sum2 flex align between">
				<view class="sum-item">
					<view>
						<uv-count-to bold color="#fff" fontSize="12" :startVal="0" :endVal="infos.like_count"
							separator=","></uv-count-to>
					</view>
					<view>总点赞</view>
				</view>
				<view class="sum-item">
					<view style="border-color: #1CDC42;">
						<uv-count-to bold color="#fff" fontSize="12" :startVal="0" :endVal="infos.comment_count"
							separator=","></uv-count-to>
					</view>
					<view>总评论</view>
				</view>
				<view class="sum-item">
					<view style="border-color:#EF6A12;">
						<uv-count-to bold color="#fff" fontSize="12" :startVal="0" :endVal="infos.total_share"
							separator=","></uv-count-to>
					</view>
					<view>总分享</view>
				</view>
			</view>

		</view>
		<!-- <view class="card">
			<view class="card-tit flex align"><text></text>时间筛选</view>
			<view class="select">
				<view class="flex align between">
					<view class="select-item flex align">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="flex align">
								<input disabled placeholder="近七天" v-model="array[index]" />
								<uni-icons type="down"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="example-body" v-if="index==3">
					<uni-datetime-picker @show="showPick" @maskClick="maskClick" @change="changeDate" v-model="range" type="daterange" />
				</view>
			</view>
		</view> -->
		<view class="card" style="min-height: 500rpx;">
			<view class="card-tit flex align"><text></text>视频热度排行</view>
			<view class="charts-box" v-if="showChart">
				<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>视频点赞/评论</view>
			<view class="charts-box charts-box2">
				<qiun-data-charts :ontouch="true" type="column" :opts="opts2" :chartData="chartData2" />
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>视频分享/下载</view>
			<view class="charts-box charts-box2">
				<qiun-data-charts :ontouch="true" type="line" :opts="opts3" :chartData="chartData3" />
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>视频发布统计</view>
			<view class="charts-box charts-box2">
				<qiun-data-charts :ontouch="true" type="mix" :opts="opts4" :chartData="chartData4" />
			</view>
		</view>
		<!-- <view class="card">
			<view class="card-tit flex align"><text></text>视频转发统计</view>
			<view class="charts-box charts-box2">
				<qiun-data-charts :ontouch="true" type="line" :opts="opts5" :chartData="chartData5" />
			</view>
		</view> -->
		<view class="card">
			<view class="card-tit flex align"><text></text>最新视频统计</view>
			<view class="card-table">
				<view class="flex align between tr1">
					<view class="bgWite borRi borBom"></view>
					<view class="bgWite borRi borBom">播放</view>
					<view class="bgWite borRi borBom">点赞</view>
					<view class="bgWite borRi borBom">评论</view>
					<view class="bgWite borRi borBom">分享</view>
				</view>
				<view class="flex align between tr1">
					<view class="bgWite borRi borBom">抖音</view>
					<view class="borRi borBom">{{infos.douyin_view_count}}</view>
					<view class="borRi borBom">{{infos.douyin_like_count}}</view>
					<view class="borRi borBom">{{infos.douyin_comment_count}}</view>
					<view class="borRi borBom">{{infos.douyin_share_count}}</view>
				</view>
				<view class="flex align between tr1">
					<view class="bgWite borRi borBom">快手</view>
					<view class="borRi borBom">{{infos.ks_view_count}}</view>
					<view class="borRi borBom">{{infos.ks_like_count}}</view>
					<view class="borRi borBom">{{infos.ks_comment_count}}</view>
					<view class="borRi borBom">{{infos.ks_share_count}}</view>
				</view>
				<view class="flex align between tr1">
					<view class="bgWite borRi borBom">哔哩</view>
					<view class="borRi borBom">{{infos.bili_view_count}}</view>
					<view class="borRi borBom">{{infos.bili_like_count}}</view>
					<view class="borRi borBom">{{infos.bili_comment_count}}</view>
					<view class="borRi borBom">{{infos.bili_share_count}}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>矩阵分部</view>
			<view class="charts-box charts-box2">
				<qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userDaping
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				showChart: true,
				array: ["近七天", "昨天", "近30天", "自定义时间"],
				array2: ["综合排序", "售卖金额降序", "核销金额降序", "视频数量降序", "视频播放量降序"],
				index: '',
				range: '',
				start_time: '',
				end_time: '',
				selAct: 1,
				index2: '',
				brand_id: '',
				douyinData: '',
				videoData: '',
				datas: '',
				statusBarHeight: 20,
				barHeight: 44,
				barWidth: null,
				chartData: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				chartData5: {},
				chartData6: {},
				infos: '',
				//您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#2D2D2D"],
					padding: [15, 40, 0, 0],
					enableScroll: false,
					legend: {},
					fontSize: 8,
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						fontSize: 6,
					},
					yAxis: {},
					extra: {
						bar: {
							type: "group",
							width: 10,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				opts2: {
					color: ["#2D2D2D", "#ef9a76", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					fontSize: 10,
					xAxis: {
						disableGrid: true,
						fontSize: 8,
						rotateAngle: 30,
						rotateLabel: true,
						scrollShow: true,
						itemCount: 7
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 13,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				opts3: {
					color: ["#2D2D2D", "#FE6949", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 0, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					fontSize: 10,
					xAxis: {
						disableGrid: true,
						fontSize: 8,
						rotateAngle: 30,
						rotateLabel: true,
						scrollShow: true,
						itemCount: 7
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts4: {
					color: ["#2D2D2D", "#ef9a76", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 10, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: true
					},
					fontSize: 10,
					xAxis: {
						disableGrid: true,
						fontSize: 8,
						rotateAngle: 30,
						rotateLabel: true,
						scrollShow: true,
						itemCount: 7
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: ""
							},
							{
								position: "right",
								min: 0,
								title: "",
								textAlign: "left"
							},
						]
					},
					extra: {
						mix: {
							column: {
								width: 13
							}
						}
					}
				},
				opts5: {
					color: ["#FE6949", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 0, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					fontSize: 10,
					xAxis: {
						disableGrid: true,
						fontSize: 8,
						rotateAngle: 30,
						rotateLabel: true,
						scrollShow: true,
						itemCount: 7
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts6: {
					rotate: false,
					rotateLock: false,
					color: ["#ef9a76", "#2D2D2D", "#896DF6", "#FE6949", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					fontSize: 12,
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "总体",
						fontSize: 12,
						color: "#666666"
					},
					subtitle: {
						name: "1060",
						fontSize: 18,
						color: "#2D2D2D"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF"
						}
					}
				}

			};
		},
		onLoad(option) {
			let that = this;
			//通过uni自带api获取手机系统信息
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res)
					that.statusBarHeight = res.statusBarHeight; //手机状态栏高度
					let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
					that.barHeight = !isiOS ? 48 : 44; //导航栏高度，iOS：48，Android：44
					that.barWidth = res.windowWidth - 87; //nabbar可操作宽度 = 屏幕宽度 - 小程序右上角的胶囊宽度（87）
				}
			})
		},
		onReady() {
			this.getDatas()
			// this.getPanel()
			// this.getServerData();
			// this.getVideoStatisByDate()
			// this.getServerData6();
		},

		methods: {
			async getDatas() {
				const result = await userDaping()
				this.infos = result.data.data
				this.getServerData()
				this.getServerData2()
				this.getServerData3()
				this.getServerData4()
				this.getServerData6()
			},
			maskClick() {
				this.showChart = true
			},
			showPick() {
				this.showChart = false
			},
			getInfo() {
				this.getPanel()
				this.getServerData();
				this.getVideoStatisByDate()
				this.getServerData6();
			},
			changeDate(e) {
				if (e.length == 0) {
					this.start_time = ''
					this.end_time = ''
				} else {
					this.start_time = e[0]
					this.end_time = e[1]
				}
				this.getInfo()
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				if (this.index == 0) {
					this.start_time = ''
					this.end_time = ''
					this.getInfo()
				}
				if (this.index == 1) {
					this.getLastDay()
					this.getInfo()
				}
				if (this.index == 2) {
					this.getThreeDay()
					this.getInfo()
				}
			},
			bindPickerChange2(e) {
				console.log(e)
				this.index2 = e.detail.value
				if (this.index2 == 0) {
					this.field = ''
					this.order = ''
				}
				if (this.index2 == 1) {
					this.field = 'receive_money'
					this.order = 'desc'
				}
				if (this.index2 == 2) {
					this.field = 'verify_price'
					this.order = 'desc'
				}
				if (this.index2 == 3) {
					this.field = 'douyin_video_total'
					this.order = 'desc'
				}
				if (this.index2 == 4) {
					this.field = 'douyin_video_play_count'
					this.order = 'desc'
				}
				this.getInfo()
			},
			getLastDay() {
				var today = new Date(); // 获取当前日期
				var yesterday = new Date(today); // 复制当前日期
				var t = new Date(today)
				yesterday.setDate(today.getDate() - 1); // 设置为昨天日期
				t.setDate(today.getDate()); // 设置为昨天日期
				var yesterdayDate = yesterday.toISOString().slice(0, 10); // 转换为本地日期字符串（格式：YYYY-MM-DD）
				this.start_time = yesterdayDate
				this.end_time = t.toISOString().slice(0, 10)
			},
			getThreeDay() {
				var today = new Date(); // 获取当前日期
				var yesterday = new Date(today); // 复制当前日期
				var t = new Date(today)
				yesterday.setDate(today.getDate() - 30); // 设置为昨天日期
				t.setDate(today.getDate()); // 设置为昨天日期
				var yesterdayDate = yesterday.toISOString().slice(0, 10); // 转换为本地日期字符串（格式：YYYY-MM-DD）
				this.start_time = yesterdayDate
				this.end_time = t.toISOString().slice(0, 10)
			},
			toActDate(e) {
				this.date = e
			},
			async getPanel() {
				const result = await brand_panel({
					start_time: this.start_time,
					end_time: this.end_time
				})
				this.datas = result.data
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				let list1 = this.infos.video_hot_key.split(',')
				let list2 = this.infos.video_hot_value.split(',')
				let arr = []
				list1.forEach(item => {
					item = item.replace(/"/g, '')
					arr.push(item)
				})
				// result.data.forEach(item => {
				// 	list1.push(item.employee_name)
				// 	list2.push(item.play_count)
				// })
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: arr,
					series: [{
						name: "热度值",
						data: list2
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			async getVideoStatisByDate() {
				const result = await videoStatisByDate({
					start_time: this.start_time,
					end_time: this.end_time
				})
				if (result.code == 1) {
					this.videoData = result.data
					this.getServerData2();
					this.getServerData3();
					this.getServerData4();
					// this.getServerData5();
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}

			},
			getServerData2() {
				//模拟从服务器获取数据时的延时
				// setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let that = this
				let list1 = that.infos.task_data_key.split(',')
				let arr = []
				list1.forEach(item => {
					item = item.replace(/"/g, '')
					arr.push(item)
				})
				let res = {
					categories: arr,
					series: [{
							name: "点赞",
							data: that.infos.like_data.split(',')
						},
						{
							name: "评论",
							data: that.infos.comment_data.split(',')
						}
					]
				};
				that.chartData2 = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
			getServerData3() {
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let that = this
				let list1 = that.infos.task_data_key.split(',')
				let arr = []
				list1.forEach(item => {
					item = item.replace(/"/g, '')
					arr.push(item)
				})
				let res = {
					categories: arr,
					series: [{
							name: "分享",
							data: that.infos.share_data.split(',')
						},
						{
							name: "下载",
							data: that.infos.download_data.split(',')
						}
					]
				};
				that.chartData3 = JSON.parse(JSON.stringify(res));
			},
			getServerData4() {
				//模拟从服务器获取数据时的延时
				let that = this
				let list1 = that.infos.task_data_key.split(',')
				let arr = []
				list1.forEach(item => {
					item = item.replace(/"/g, '')
					arr.push(item)
				})
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: arr,
					series: [{
							name: "发布",
							type: "column",
							index: 1,
							data: that.infos.send_data.split(',')
						},
						{
							name: "播放",
							index: 1,
							type: "column",
							data: that.infos.view_data.split(',')
						},
						{
							name: "点赞",
							index: 1,
							type: "column",
							data: that.infos.like_data.split(',')
						},
						{
							name: "评论",
							type: "line",
							data: that.infos.comment_data.split(',')
						},
						{
							name: "分享",
							type: "line",
							data: that.infos.share_data.split(',')
						},
						{
							name: "下载",
							type: "line",
							data: that.infos.download_data.split(',')
						}
					]
				};
				that.chartData4 = JSON.parse(JSON.stringify(res));
			},
			getServerData5() {
				//模拟从服务器获取数据时的延时
				let that = this
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: that.videoData.dates,
					series: [{
						name: "转发",
						data: that.videoData.forward_counts
					}]
				};
				that.chartData5 = JSON.parse(JSON.stringify(res));
			},
			getServerData6() {
				//模拟从服务器获取数据时的延时
				let res = {
					series: [{
						data: [{
							"name": "抖音",
							"value": this.infos.douyin_count,
							"labelText": "抖音:"+this.infos.douyin_count
						},{
							"name": "快手",
							"value": this.infos.ks_count,
							"labelText": "快手:"+this.infos.ks_count
						},{
							"name": "哔哩",
							"value": this.infos.bili_count,
							"labelText": "哔哩:"+this.infos.bili_count
						}]
					}]
				};
				this.chartData6 = JSON.parse(JSON.stringify(res));
				let nums = Number(this.infos.douyin_count)+Number(this.infos.ks_count)+Number(this.infos.bili_count)
				this.opts6.subtitle.name = nums
			},
			toBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.select {
		font-size: 24rpx;
		padding: 20rpx 20rpx 0;

		.select-item {
			border: solid 1rpx gainsboro;
			padding: 8rpx 20rpx;
			width: 30%;
			text-align: center;
		}

		.example-body {
			margin-top: 20rpx;
		}

		.select-item-act {
			background: #ef9a76;
			color: white;
		}
	}

	.top-img {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		image {
			width: 100%;
			border-radius: 5rpx;
			height: 504rpx;
		}
	}

	.top-num {
		color: white;
		font-size: 18rpx;
		text-align: center;

		.sum {
			margin-bottom: 30rpx;
			margin-top: 20rpx;

			view:nth-child(1) {
				font-size: 48rpx;
				margin-bottom: 6rpx;
			}
		}

		.sum2 {
			text-align: center;
			margin: 0 74rpx;

			.sum-item {
				font-size: 24rpx;

				view:nth-child(1) {
					width: 92rpx;
					height: 92rpx;
					text-align: center;
					line-height: 92rpx;
					font-weight: bold;
					border: solid 12rpx #E4D613;
					border-radius: 50%;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.card {
		background: white;
		padding: 30rpx;
		margin: 24rpx;
		border-radius: 12rpx;
		box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;

		.card-tit {
			font-size: 24rpx;
			color: #202020;
			font-weight: bold;

			text {
				display: block;
				width: 5rpx;
				height: 26rpx;
				background: #ef9a76;
				border-radius: 5rpx;
				margin-right: 8rpx;
			}
		}

		.card-table {
			margin-top: 20rpx;
			text-align: center;

			.tr1 {
				view {
					flex: 1;
					color: #2D2D2D;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 18rpx;
					font-weight: bold;
				}

				.bgWite {
					background: #ef9a76;
					color: white;
				}

				.borRi {
					border-right: solid 1rpx #6b6b6b;
				}

				.borLe {
					border-left: solid 1rpx #6b6b6b;
				}

				.borBom {
					border-bottom: solid 1rpx #6b6b6b;
				}
			}

		}
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 900rpx;
	}

	.charts-box2 {
		height: 400rpx;
	}
</style>